﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>为了学习基础语法，我并没有用vue-cli脚手架来vue init初始化项目，而是直接用script标签引入</title>
</head>
<body>
    <div id="example">
        <h2>表单输入绑定(各种指令用法)</h2>
        <p>为了学习基础语法，我并没有用vue-cli脚手架来vue init初始化项目，而是直接用script标签引入</p>
        <br />
        <button v-on:click="say('我是按钮，你点击了我')">按钮点击</button>
        <hr />
        <h3 v-color="'red'">计算属性和观察者</h3>
        <div>
            <input type="text" v-model="ipt">
        </div>
        <div>计算属性：{{toUp}}</div>
        <input type="text" v-model="ipt2">
        <hr />
        <h3 v-color="'red'">自定义组件[简单]，输出一个文本或者一个标签块</h3>
        <div>
            <simple></simple>
        </div>
        <hr />
        <h3 v-color="'red'">自定义组件[复杂]，输出一个ul无序列表</h3>
        <div>
            <do-list v-bind:data="list">

            </do-list>
        </div>
        <hr />

        <h3 v-color="'red'">多个复选框，绑定到同一个数组</h3>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <span>选中的值: {{ checkedNames }}</span>

        <hr />
        <h3 v-color="'red'">单选按钮</h3>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <span>选中的值: {{ picked }}</span>

        <hr />
        <h3 v-color="'red'">选择框</h3>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>Vue 1.x</option>
            <option>Vue 2.x</option>
            <option>Vue 3.x</option>
        </select>
        <span>选中的值: {{ selected }}</span>

        <hr />
        <h3 v-color="'red'">文本</h3>
        <input v-model="message" placeholder="单行文本">输入的值: {{ message }}

        <hr />
        <h3 v-color="'red'">多行文本</h3>

        <textarea v-model="message" placeholder="多行文本"></textarea><br />
        <span>输入的值:</span>
        <p style="white-space: pre-line;">{{ message }}</p>



       <br /><br /><br /><br /><br /><br /><br /><br /><br /> <hr />
    </div>
    <!--这里可以自己下载下来引用，也可以使用外部动态链接引用-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        // 注册一个全局自定义【指令】 v-color
        Vue.directive("color", function (el, binding) {  /* el就是页面的dom */
            el.style.color = binding.value;
        });

        // 注册一个全局自定义组件 simple
        Vue.component("simple", Vue.extend({
            template: '<div>我是一个div块哦</div>'
        }));

        // 注册一个复杂全局自定义【组件】 do-list
        Vue.component("do-list", Vue.extend({
            //(父子传参)子组件要显式地用 props 选项声明它预期的数据：
            props: ['data'],
            template: `
            <ul>
                <li v-for="item in data">{{item.name}}</li>
            </ul>
        `
        }));


        //一个vue的实例
        new Vue({
            el: '#example',
            data: {
                msg: 'Hello!',
                ipt: '我是计算机属性',
                ipt2: '我是观察者',
                message :"",
                list: [
                    { name: '西游记', author: '吴承恩' },
                    { name: '红楼梦', author: '曹雪芹' },
                    { name: '水浒传', author: '施耐庵' },
                    { name: '三国演义', author: '罗贯中' }
                ],
                checkedNames: [],   //多选
                picked: '',         //单选
                selected: ''        //单选框
            },

            //计算属性
            computed: {
                toUp: function () {
                    var that = this;
                    var temp = that.ipt;
                    return temp;
                }
            },

            //函数（用于弹框）
            methods: {
                say: function (i) {
                    alert(i)
                }
            },

            //观察者
            watch: {
                // 如果 `ipt2` 发生改变，这个函数就会运行
                ipt2: function (newVal) {
                    this.say(newVal)
                    //console.log(this.ipt2);
                }
            }

            //至于路由，我暂时先用官方支持的 vue-router 库，而不用基础的自带路由
        });





    </script>
</body>
</html>